<template>
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="125px">

            <el-row style="border-radius: 4px;">
                <el-col :span="12">
                    <el-form-item label="上游代理名称:" prop="name">
                        <el-input v-model="form.name" placeholder="主机名，它必须等于host服务"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="负载插槽数:"  prop="slots" >
                        <span slot="label">
                            <el-tooltip content="负载均衡器算法中的插槽数(10-65536)默认10000" placement="right-end">
                            <i class="el-icon-question"></i>
                            </el-tooltip>
                            负载插槽数:
                        </span>
                        <el-input type="number" v-model="form.slots" placeholder="负载均衡器算法中的插槽数(10-65536)默认10000"></el-input>
                    </el-form-item>
                </el-col>                
            </el-row>

            <el-row style="border-radius: 4px">
                <el-col :span="24">
                    <el-form-item label="负载算法:" prop="algorithm">
                        <el-radio v-for="item in algorithms" :key="item.label" :label="item.label" v-model="form.algorithm"></el-radio>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="24">
                    <el-form-item label="标签:" prop="tags">
                        <el-tag :key="tag" v-for="tag in form.tags" closable 
                        :disable-transitions="false" 
                        @close="handleTagClose(tag)">
                            {{tag}}
                        </el-tag>
                        
                        <span slot="label">
                            <el-tooltip content="与上游相关联的一组可选字符串，用于分组和过滤" placement="right-end">
                            <i class="el-icon-question"></i>
                            </el-tooltip>
                            标签:
                        </span>

                        <el-input v-model="inputTag" placeholder="与上游相关联的一组可选字符串，用于分组和过滤。按enter键 确认"
                        @keyup.enter.native="handleInputTagConfirm"
                        @blur="handleInputTagConfirm"
                        ></el-input>
                    </el-form-item>                    
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="散列输入:" prop="">                        
                        <span slot="label">
                            <el-tooltip content="散列的加权循环方案,默认为 none " placement="right-end">
                            <i class="el-icon-question"></i>
                            </el-tooltip>
                            散列输入:
                        </span>
                        <el-radio-group v-model="form.hash_on" size="mini" >
                            <el-radio v-for="hash in hashList" :key="hash.label" :label="hash.label" border  @change="handleHashOnChange"></el-radio>
                        </el-radio-group>
                    </el-form-item>                    
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="散列输入标头:" v-if="hashOnLabel=='header'">
                        <el-input v-model="form.hash_on_header" placeholder="作为哈希输入的标头名称的值"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="散列输入cookie:" v-if="hashOnLabel=='cookie'">
                        <el-input v-model="form.hash_on_cookie" placeholder="哈希输入的 cookie 名称的值"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-row>
                <el-col :span="24">
                    <el-form-item label="hash_fallback:" prop="">  

                        <span slot="label">
                            <el-tooltip content="如果主hash_on节点不返回哈希值（例如，缺少标头，或未识别消费者），则将什么用作哈希输入,默认为 none " placement="right-end">
                            <i class="el-icon-question"></i>
                            </el-tooltip>
                            hash_fallback:
                        </span>
                        <el-radio-group v-model="form.hash_fallback" size="mini" >
                            <el-radio v-for="hash in hashFallbackList" :key="hash.label" :label="hash.label" border  @change="handleHashFallbackChange"></el-radio>
                        </el-radio-group>
                    </el-form-item>                    
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="24">
                    <el-form-item label="哈希输入标头:" v-if="hashFallbackLabel=='header'">
                        <el-input v-model="form.hash_fallback_header" placeholder="获取值作为哈希输入的标头名称"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="哈希cookie路径:" v-if="hashFallbackLabel=='cookie'">
                        <el-input v-model="form.hash_on_cookie_path" placeholder="在响应标头中设置的 cookie 路径"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


        </el-form>
        
        <el-row type="flex" justify="end">
            <el-col :span="12">
                 <el-button type="primary" @click="submitForm">{{operateBtnName}}</el-button>
                 <el-button @click="cancel">取 消</el-button>
            </el-col>
        </el-row>   
    </div>
</template>
<script>
import {dict} from '@/const/dict.js';
import {addUpstream} from '@/api/kong/upstream.js'
export default {
    props:{
        operate:{
            type: String,
            required: false,
            default: 'add'
        },
        upstream:{
            type:Object,
            required: false,
            default: null
        }
    },
    data () {
        return {
            form:{
                name:"",
                slots: 10000,
                tags:[],
                hash_on:"none",
                hash_fallback:"none",
                hash_on_header:null,
                hash_fallback_header:null,
                hash_on_cookie:null,
                hash_on_cookie_path:"/",
                algorithm:"round-robin",
            },
            rules:{
                name:[
                        { required: true, message: '请输入上游代理名称', trigger: 'blur' },                        
                    ],
                tags:[
                        {required: true, message: '标签信息不能为空', trigger: 'blur' }
                ],
            },
            // 负载算法 字典
            algorithms: dict.U_ALGORITHMS,
            hashList: dict.HASH_ON,
            hashFallbackList:dict.FALLBACK_TYPE,
            hashOnLabel: "none",
            hashFallbackLabel:"none",            
            inputTag:"",
            operateBtnName:"确 认",

        }
    },
    created(){
        // console.log("this.upstream" + JSON.stringify(this.upstream))
        // console.log("operate: "+this.operate)
        if(this.upstream){
            this.form=this.upstream || this.form;
        }
        if(this.operate=="add"){
            this.operateBtnName="确 认";
        }
        if(this.operate == "edit"){
            this.operateBtnName="修 改";
            
        }
    },
    methods:{
        submitForm(){
            this.$refs['form'].validate(valid => {
                if (!valid) return;
                // console.log(this.form);
                if(this.operate=="add"){
                    // TODO 提交表单
                    addUpstream(this.form).then( res =>{
                        // console.log(JSON.stringify(res))
                        // 重置表单
                        this.reset();
                        // 关闭窗口
                        this.$emit('callback',"新增成功");
                    })
                }
            })

        },
        cancel(){            
            // 重置表单
            this.reset();
            // 关闭窗口
            this.$emit('callback',"已取消操作");
        },
        
        // 表单重置
        reset() {
            this.form = {
                name:"",
                slots: 10000,
                tags:[],
                hash_on:"none",
                hash_fallback:"none",
                hash_on_header:"",
                hash_fallback_header:"",
                hash_on_cookie:"",
                hash_on_cookie_path:"",
                algorithm:"round-robin",
            };
            this.resetForm("form");
        },
        handleHashOnChange(label){
            this.hashOnLabel=label;
        },
        handleHashFallbackChange(label){
            this.hashFallbackLabel=label;
        },
        // 标签关闭事件
        handleTagClose(tag){
            this.form.tags.splice(this.form.tags.indexOf(tag),1);
        },

        // 标签输入确认事件
        handleInputTagConfirm(){
            let inputValue=this.inputTag;
            if(inputValue){
                if(this.form.tags.indexOf(inputValue)>-1){
                    this.inputTag="";
                    return;
                }
                this.form.tags.push(inputValue);
            }
            this.inputTag="";
        },
    }
    
}
</script>
<style lang="stylus" scoped>

</style>